<template>
    <div>
        <el-row class="operate">
            <el-col :span="9">
                <el-form class="demo-form-inline" style="margin-top: 10px" :inline="true" label-width="80px">
                    <el-button type="primary" @click="dialogFormVisible = true" style="margin-right: 20px">新增
                    </el-button>
                    <el-form-item>
                        <!--                        <el-select v-model="tableData" placeholder="请选择名称" style="width: 120px">-->
                        <!--                            <el-option-->
                        <!--                                    v-for="i in tableData"-->
                        <!--                                    :key="i.id"-->
                        <!--                                    :label="i.headrsName"-->
                        <!--                                    :value="i.headrsName">-->
                        <!--                            </el-option>-->
                        <!--                        </el-select>-->
                    </el-form-item>

                    <el-button type="primary" @click="selectName()">查询</el-button>
                </el-form>
            </el-col>
        </el-row>

        <el-dialog
                title="添加公共接口"
                :visible.sync="dialogFormVisible"
                width="700px"
        >
            <el-form :model="addPublic" :rules="rules" ref="form1">
                <el-form-item label="公共名称:" prop="name">
                    <el-input v-model="addPublic.headrsName" auto-complete="false" style="width: 400px"></el-input>
                </el-form-item>

                <el-form-item label="接口地址:" prop="apiURL">
                    <el-input v-model="addPublic.url" auto-complete="false" style="width: 400px;"></el-input>
                </el-form-item>

                <el-form-item label="请求方式:">
                    <el-select v-model="addPublic.method" placeholder="请选择请求方式"
                               style="width: 100px;margin-right: 300px">
                        <el-option label="GET" value="GET"></el-option>
                        <el-option label="POST" value="POST"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="数据类型:">
                    <el-select v-model="addPublic.request_data_type" placeholder="请选择数据类型"
                               style="width: 100px;margin-right: 300px">
                        <el-option label="JSON" value="JSON"></el-option>
                        <el-option label="DATA" value="DATA"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="头部信息:">
                    <el-input v-model="addPublic.request_header_param" auto-complete="false"
                              style="width: 400px"></el-input>
                </el-form-item>

                <el-form-item label="传参内容:">
                    <el-input v-model="addPublic.request_data_content" auto-complete="false"
                              style="width: 400px"></el-input>
                </el-form-item>

                <el-form-item
                        v-for="(request_value, index) in addPublic.request_value"
                        :label="'动态取值' + index"
                        :key="request_value.key"
                >
                    <el-input v-model="request_value.realkey" placeholder="real别名" style="width: 200px"></el-input>
                    <el-input v-model="request_value.newKey" style="width: 200px"></el-input>
                    <el-select v-model="request_value.newValue" placeholder="选择下标" style="width: 100px">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="i in 30" :key="i" :label="i" :value="i-1"></el-option>
                    </el-select>
                    <el-button type="danger" @click.prevent="removeRequest_value(request_value)" v-show="index>0">删除
                    </el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="addRequest_value()">新增</el-button>


            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addPublicInterfaceAPI()">确 定</el-button>
          </span>
        </el-dialog>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%;margin-top: 20px">
            <el-table-column
                    prop="headrsName"
                    label="公共名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="url"
                    label="接口地址"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="method"
                    label="请求方式"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="request_data_type"
                    label="请求类型方式"
                    width="80">
            </el-table-column>

            <el-table-column
                    prop="request_data_content"
                    label="参数内容"
                    width="500"
            >
            </el-table-column>

            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="runPublic(scope.row.request_id)" size="mini" type="primary">运行</el-button>
                    <el-button @click.native="PubHandleEdit(scope.row.request_id)" size="mini" type="success">编辑
                    </el-button>
                    <el-button @click="publicDelete(scope.row.request_id)" size="mini" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {
        addPublicInterface,
        queryPublicInterface,
        runNerPublicInterface,
        delPublicInterface,
        getPublicInterface
    } from "../../request/api.js";
    import {Message} from 'element-ui'

    export default {
        inject: ['reload'],
        name: "publicInterface",
        data() {
            return {
                alterForm:[],
                rules: {
                    name: [{
                        required: true,
                        message: '请输入公共接口',
                        trigger: 'blur'
                    }],
                    apiURL: [{
                        required: true,
                        message: '请输入API前缀',
                        trigger: 'blur'
                    }]
                },
                Publicfiltering: {name2: ""},
                dialogFormVisible: false,
                addPublic: {
                    headrsName: "",
                    url: "",
                    method: "GET",
                    request_data_type: "DATA",
                    request_header_param: "",
                    request_data_content: "",
                    request_value: [
                        {
                            realkey: "",
                            newKey: "",
                            newValue: ""
                        }
                    ],
                },

                tableData: [],
            }
        },
        methods: {
            selectName() {

            },
            addRequest_value() { // todo 添加请求值 ???
                this.addPublic.request_value.push({
                    newKey: "",
                    newValue: "",
                    realkey: ''
                });
                console.log(this.addPublic)
            },
            removeRequest_value(item) {
                var index = this.addPublic.request_value.indexOf(item);
                if (index !== 0) {
                    this.addPublic.request_value.splice(index, 1)
                }
            },
            addPublicInterfaceAPI() {
                var p = JSON.stringify(this.addPublic);
                console.log("p:》", p);
                addPublicInterface(p).then(res => {
                    var result = res["data"];
                    console.log("result>:", result)
                    if (result["code"] == 200) {
                        Message.success("保存成功");
                        this.reload();
                    }
                    this.dialogFormVisible = false
                })
            },
            queryPublicInterfaceAPI() {//查询
                queryPublicInterface().then((respose) => {
                    var result = respose["data"]
                    if (result["code"] == 200) {
                        console.log("result:", result["data"])
                        this.tableData = result["data"]
                        console.log("tableData:", typeof this.tableData)
                    }
                })
            },
            runPublic(id) {
                console.log(id)
                var pragma = JSON.stringify({id: id}
                )
                runNerPublicInterface(pragma).then((respose) => {
                    var result = respose["data"]
                    if (result["code"] == 200) {
                        Message.success("运行成功")
                    }
                })
            },
            PubHandleEdit(id) {
               //查询
                var pragma = JSON.stringify({id: id}
                )
                getPublicInterface(pragma).then((respose) => {
                    var result = respose["data"]
                    if (result["code"] == 200) {
                        console.log("编辑：",result["data"])
                        this.alterForm = result["data"]
                    }
                })
                this.dialogFormVisible = true
            },
            publicDelete(id) {
                var pragma = JSON.stringify({id: id}
                )
                delPublicInterface(pragma).then(respose => {
                    var result = respose["data"]
                    if (result["code"] == 200) {
                        Message.success("删除成功")
                        this.reload()
                    }
                })
            }

        },
        mounted: function () {
            this.queryPublicInterfaceAPI();
        }
    }
</script>

<style lang="scss" scoped>
    .operate {
        padding-bottom: 10px;
    }
</style>